<template>
  <div class="player">
     <audio
        ref="audio"
        :src="currentSong.songUrl"
        @ended="stop"
        @timeupdate="timeupdate"
        @canplay="canplay"
      ></audio>
    <div class="full-player" v-if="playerType === 'full'">
      <button @click="TOGGLE_TYPE('mini')">mini</button>
      <div class="header">
        {{ currentSong.name }}
      </div>
      <div class="singer">
        {{ currentSong.singer }}
      </div>
      <img :src="currentSong.pic" alt="" :class="isPaused?'rotate paused':'rotate'" />
     
      <!-- 歌词 -->
      <Lyric :mid="currentSong.mid" :isPaused="isPaused" ref="lyric"/>
      <!-- 进度条 -->
      <Progress 
        :duration="duration" 
        :currentTime="currentTime"
        @changeTime="changeTime"
      />
      <!-- 工具栏 -->
      <div>
        <div @click="TOGGLE_LOOP">{{loops[loop]}}</div>
        <br>
        <br>
        <br>

        <div @click="toggleMusic('prev')">上一曲</div>
        <div @click="play">{{ isPaused ? "播放" : "暂停" }}</div>
        <div @click="toggleMusic('next')">下一曲</div>
      </div>
    </div>
    <div
      class="small-player"
      v-if="playerType === 'mini'"
    >
      <!-- @click="TOGGLE_TYPE('full')"  -->

      <div class="header">
        {{ currentSong.name }}
      </div>
      <div class="singer">
        {{ currentSong.singer }}
      </div>
      <img :src="currentSong.pic" alt="" />
      <button @click="play">{{ isPaused ? "播放" : "暂停" }}</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import {
  TOGGLE_TYPE,
  TOGGLE_CURRENT_INDEX,
  TOGGLE_MUSIC,
  TOGGLE_RANDOM_MUSIC,
  TOGGLE_LOOP,
} from "./types";
import Progress from "./components/progress/Index.vue"
import Lyric from "./components/lyric/Index.vue"

export default {
  components: { Progress, Lyric },
  data() {
    return {
      currentTime:0,
      duration: 0,
      isPaused: true,
      loops:{1:'单曲循环',2:'列表循环',3:'随机循环'}
    };
  },
  computed: {
    ...mapState("player", ["playerType", "currentIdx", "loop"]),
    ...mapGetters("player", ["currentSong"]),
  },
  methods: {
    ...mapMutations("player", [TOGGLE_TYPE, TOGGLE_CURRENT_INDEX,TOGGLE_LOOP]),
    ...mapActions("player", [TOGGLE_MUSIC, TOGGLE_RANDOM_MUSIC]),
    play() {
      console.log("暂停状态", this.audio.paused);
      if (this.audio.paused) {
        this.audio.play();
      } else {
        this.audio.pause();
      }
      this.isPaused = this.audio.paused;
    },
    toggleMusic(toggleType) {
      this.TOGGLE_MUSIC(toggleType);
    },
    stop() {
      switch (this.loop) {
        case 1:
          // 再来一遍
          this.play();
          break;
        case 2:
          // 列表循环
          this.toggleMusic("next");
          break;
        default:
          this.TOGGLE_RANDOM_MUSIC();
          break;
      }
      console.log("播放完毕");
    },
    timeupdate(e) {
      // console.log('音乐播放',e.target.currentTime)
      this.currentTime = e.target.currentTime
    },
    canplay() {
      // 歌曲加载完毕可以播放
      console.log('加载完毕')
      this.duration = this.audio.duration
      if(this.isNewSong) {
        this.play()
        this.isNewSong = false
      }
    },
    ready() {
      console.log('ready')
    },
    changeTime(time) {
      console.log("修改歌曲",time)
      this.audio.currentTime = time
      // 修改歌词
      this.$refs.lyric.seek(time)
      console.log(this.$refs.lyric)

    }
  },
  watch: {
    currentSong(newVal,oldVal) {
      console.log(newVal,oldVal)
      if(newVal.mid !== oldVal.mid) {
        console.log('播放新的歌曲')
        this.isNewSong = true
      }
    }
  },
  mounted() {
    this.audio = this.$refs.audio;
    // console.log("audio", this.audio.__proto__);
  },
};
/*
1.播放器展示  v
  点击一首歌 存歌单 当前歌曲的下标 0,1
  [孤勇者,abc]
2.播放器尺寸的切换 v
  只做2个播放器(大 小) 通过按钮控制显示隐藏
3.界面显示 
  * 名字 v
  * 专辑图片 v
  * 动画效果 x
4. 播放功能
  audio 歌曲的链接 v
  * 工具栏 v
  * 播放停止暂停 v
  * 下一曲 上一曲 v
  * 播放模式  v
  * 喜欢收藏 
  * 进度条
5. 歌词显示
*/
</script>

<style lang="less" scoped>
@import "~@style/index.less";
.player {
  .full-player {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: skyblue;
    img {
      .w(280);
      .h(280);
      border-radius: 50%;
    }
  }
  .small-player {
    position: fixed;
    bottom: 0;
    .h(88);
    left: 0;
    right: 0;
    background: lightgray;
    display: flex;
    img {
      .w(60);
      .h(60);
      border-radius: 50%;
    }
  }
}
// 动画
@keyframes ratate {
  form {
    transform: rotate(0deg);
  };
  to {
    transform: rotate(360deg);
  }
}
.rotate {
  animation: ratate 20s infinite linear;
}
.paused {
 animation-play-state: paused ;
}
</style>
